<template>
  <div class="audit">
    <div class="card-container mb-5">
      <div class="audit-title">
        新增软件版本审核
        <Tag
          class="ml-2"
          :color="auditInfo.isAudit == '0' ? 'success' : 'warning'"
          >{{ auditEnum[auditInfo.isAudit as keyof typeof auditEnum ] }}</Tag
        >
      </div>
      <Row class="mb-2.5">
        <Col :span="8">
          <div class="audit_left">
            <div>
              <span class="audit-txt">创建时间</span>
              <span>{{ auditInfo.createTime }}</span>
            </div>
            <div>
              <span class="audit-txt">申请人</span>
              <span>{{ auditInfo.createBy }}</span>
            </div>
          </div>
        </Col>
        <Col :span="8">
          <div class="audit_right">
            <div>
              <span class="audit-txt">审核时间</span>
              <span>{{
                auditInfo.auditTime ? auditInfo.auditTime : '--'
              }}</span>
            </div>
            <div>
              <span class="audit-txt">审核人</span>
              <span>{{ auditInfo.auditBy ? auditInfo.auditBy : '--' }}</span>
            </div>
          </div>
        </Col>
      </Row>
    </div>
    <div class="card-container">
      <div class="audit-code">
        <span class="audit-txt">软件版本ID</span
        ><span>{{ auditInfo.code }}</span>
      </div>
      <Row :gutter="10">
        <Col :span="6">
          <div class="audit_code_left">
            <p>设备类型/型号</p>
            <Tree
              :tree-data="auditInfo.modelAlwaysVOS"
              :field-names="fileNames"
            />
          </div>
        </Col>
        <Col :span="18">
          <div class="audit_code_right">
            <Row :gutter="10" class="mb-2.5">
              <Col :span="8">
                <p>软件包版本</p>
                <span
                  >{{ auditInfo.version
                  }}{{
                    auditInfo.versionCode ? `(${auditInfo.versionCode})` : ''
                  }}</span
                >
              </Col>
              <Col :span="8">
                <p>更新类型</p>
                <span>{{ appUpdateTypeEnum[auditInfo.appUpdateType] }}</span>
              </Col>
              <Col :span="8">
                <p>待升级设备软件版本</p>
                <span>{{
                  auditInfo.appUpdateType == '1'
                    ? '-'
                    : `${auditInfo.currentVersion}(${auditInfo.currentVersionCode ? auditInfo.currentVersionCode : ''})`
                }}</span>
              </Col>
            </Row>
            <Row :gutter="10" class="mb-2.5">
              <Col :span="24">
                <p>文件下载地址</p>
                <span>{{ auditInfo.versionDowmloadUrl }}</span>
              </Col>
            </Row>
            <Row :gutter="10" class="mb-2.5">
              <Col :span="24">
                <p>MD5</p>
                <span>{{ auditInfo.md5 }}</span>
              </Col>
            </Row>
            <Row :gutter="10" class="mb-2.5">
              <Col :span="24">
                <p>版本说明</p>
                <span>{{ auditInfo.versionDesc }}</span>
              </Col>
            </Row>
          </div>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script setup lang="tsx">
import { onMounted, reactive, ref } from 'vue';
import { Col, Row, Tag, Tree, TreeProps, TreeSelect } from 'ant-design-vue';
import {
  appUpdateTypeEnum,
  appUpdateTypeOption,
  auditEnum,
  packageTypeEnum,
} from '@/constant/push';
import { getSoftwareInfo } from '@/api/push';

const props = defineProps({
  audit: {
    type: Object,
    default: {},
  },
});
const auditInfo = props.audit;
const fileNames: TreeProps['fieldNames'] = {
  title: 'typeName',
  children: 'modeName',
};
onMounted(() => {
  console.log(props.audit, '555555');
  getSoftwareInfo(props.audit.versionId).then((res) => {
    auditInfo.versionDowmloadUrl = (res as any).data.versionDowmloadUrl;
  });
});
</script>
<style lang="scss" scoped>
@mixin customStyle {
  &::after {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    content: '';
    display: block;
    min-width: 1.7px;
    height: 80%;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.1)
    );
    opacity: 0.5;
  }
}
@mixin title {
  padding-bottom: 10px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.audit-title {
  @include title;
}

.audit-txt,
p {
  margin-right: 12px;
  color: #fff;
}

.audit-code {
  @include title;
  margin-top: 10px;
  font-size: 14px;
}
:deep(.ant-tree) {
  background: none;
}

.audit-txt {
  display: inline-block;
  min-width: 100px;
}
.audit_right {
  margin-left: 50px;
}
.audit_left {
  @include customStyle;
}
.card-container {
  padding: 10px 15px;
}
.audit_code_left {
  @include customStyle;
}
.audit_code_right {
  margin-left: 50px;
}
.audit {
  width: 208%;
}
</style>
